<template>
    <a-layout-header class="header">
        <div class="logo">
            <!--            <img src="/image/favicon.png" alt="">-->
            <span style="margin-left: 30px">易学伴</span>
        </div>
        <a-menu
                theme="dark"
                mode="horizontal"
                :style="{ lineHeight: '64px' }"
        >
            <a-menu-item key="/">
                <router-link to="/">
                    首页
                </router-link>
            </a-menu-item>
            <a-menu-item key="/about">
                <router-link to="/about">
                    教师资源
                </router-link>
            </a-menu-item>
            <a-menu-item key="/individualiz" :style="user.identity === '0' ? {} : {display: 'none'}">
                <router-link to="/individualiz">
                    私人订制
                </router-link>
            </a-menu-item>
            <a-menu-item key="/teaAbout" :style="user.identity === '1' ? {} : {display: 'none'}">
                <router-link to="/teaAbout">
                    订单广场
                </router-link>
            </a-menu-item>
            <a class="login-menu" v-show="user.user_id">
                <span>欢迎您：</span>
                <a-dropdown>
                    <a class="ant-dropdown-link" @click.prevent>
                        <a-badge :count="5" dot>
                            <a-avatar :size="large" class="head-example">
                                <template #icon>
                                    <UserOutlined v-show="user.u_head_portrait"/>
                                    <img src="/image/logo.jpg">
                                </template>
                            </a-avatar>
                        </a-badge>
                        {{user.user_name}}
                        <DownOutlined/>
                    </a>
                    <template #overlay>
                        <a-menu>
                            <a-menu-item key="/personal">
                                <a href="/personal/personalInformation">个人主页</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="/personal/wallet">我的钱包</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a-badge :count="5" dot>
                                    <a href="/personal/myMessage/message" class="head-example">消息</a>
                                </a-badge>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="/personal/orderRecord">我的订单</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="/personal/consulting">咨询</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a-popconfirm
                                        title="确认注销用户？注销后下次要重新登录！"
                                        ok-text="是"
                                        cancel-text="否"
                                        @confirm="logout()"
                                >
                                    <a href="javascript:;">退出</a>
                                </a-popconfirm>
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </a>
            <a class="login-menu" v-show="!user.user_id" @click="showRegisterModal">
                <span>注册</span>
            </a>
            <a class="login-menu" v-show="!user.user_id" @click="showLoginModal">
                <span>登录</span>
            </a>
        </a-menu>

        <a-modal
                title="用户名登录"
                v-model:visible="loginModalVisible"
                :confirm-loading="loginModalLoading"
                :footer="null"
                width="400px"
        >
            <a-form :model="userLogin"
                    :rules="rules"
                    ref="formRef"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 23 }"
                    style="width: 266px; background: #fff; margin: 20px auto 0">
                <a-form-item name="user_number">
                    <a-input v-model:value="userLogin.user_number" class="input phone-form-code-input"
                             placeholder="请输入用户名"/>
                </a-form-item>
                <a-form-item name="password">
                    <a-input-password v-model:value="userLogin.password" type="password"
                                      style="width: 267px; height: 40px" placeholder="请输入密码"/>
                </a-form-item>
                <a-form-item name="identity">
                    <a-radio-group  v-model:value="userLogin.identity">
                        <a-radio value="0">用户</a-radio>
                        <a-radio value="1">教员</a-radio>
                    </a-radio-group>
                </a-form-item>
                <button class="login-mobile-btn" :disabled="checked === true ? false : true"
                        :style="checked === true ? {} : {opacity: .5}" @click="login">
                    登录
                </button>
                <div>
                    <a-checkbox v-model:checked="checked"></a-checkbox>
                    <span style="line-height: 18px; font-size: 12px; color: #a0a8b0">
                        我已阅读并统一
                        <a style="text-decoration: none; background: transparent; color: #23b8ff">
                            《用户服务协议》
                        </a>
                        和
                        <a style="text-decoration: none; background: transparent; color: #23b8ff">
                            《隐私政策》
                        </a>
                    </span>
                </div>
                <div style="padding-top: 15px">
                    <a @click="phoneCode">
                        <span>手机验证码登录 ></span>
                    </a>
                </div>

            </a-form>

        </a-modal>

        <a-modal
                title="手机号登录"
                v-model:visible="loginPhoneCodeModalVisible"
                :confirm-loading="loginPhoneCodeModalLoading"
                :footer="null"
                width="400px"
        >
            <a-form :model="userLogin"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 23 }"
                    :rules="rules"
                    ref="formRef"
                    style="width: 266px; background: #fff;margin: 20px auto 0">
                <a-form-item name="telephone">
                    <a-input v-model:value="userLogin.telephone" class="input phone-form-code-input"
                             placeholder="请输入手机号" :maxlength="11"
                             oninput="value=value.replace(/^1[3456789]\d{9}$/g, '')"/>
                </a-form-item>
                <a-form-item name="code" style="">
                    <a-input v-model:value="userLogin.code" :maxlength="6"
                             class="input phone-form-code-input" placeholder="请输入验证码"/>
                    <button class="sms-code phone-form-code"
                            :style="(userLogin.telephone.length === 0) ? {} : {opacity: .5}">发送验证码
                    </button>
                </a-form-item>
                <a-form-item name="identity">
                    <a-radio-group name="identity" v-model:value="userLogin.identity">
                        <a-radio value="0">用户</a-radio>
                        <a-radio value="1">教员</a-radio>
                    </a-radio-group>
                </a-form-item>
                <button class="login-mobile-btn" :disabled="checked === true ? false : true"
                        :style="checked === true ? {} : {opacity: .5}" @click="login">
                    登录
                </button>
                <div>
                    <a-checkbox v-model:checked="checked"></a-checkbox>
                    <span style="line-height: 18px; font-size: 12px; color: #a0a8b0">
                        我已阅读并统一
                        <a style="text-decoration: none; background: transparent; color: #23b8ff">
                            《用户服务协议》
                        </a>
                        和
                        <a style="text-decoration: none; background: transparent; color: #23b8ff">
                            《隐私政策》
                        </a>
                    </span>
                </div>
                <br>
                <a @click="userPsw">
                    <span>账号密码登录 ></span>
                </a>
            </a-form>
        </a-modal>
        <a-modal
                title="注册"
                v-model:visible="registerModalVisible"
                :confirm-loading="registerModalLoading"
                @ok="register"
                :footer="null"
                width="400px"
                destroyOnClose="true"
        >
            <a-form :model="userRegister"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 23 }"
                    ref="formRef"
                    :rules="rules"
                    style="width: 266px; background: #fff;margin: 20px auto 0">
                <a-form-item name="user_number">
                    <a-input v-model:value="userRegister.user_number" class="input phone-form-code-input"
                             placeholder="请输入用户名"/>
                </a-form-item>
                <a-form-item name="password">
                    <a-input v-model:value="userRegister.password" class="input phone-form-code-input"
                             placeholder="请输入密码"/>
                </a-form-item>
                <a-form-item name="telephone">
                    <a-input v-model:value="userRegister.telephone" class="input phone-form-code-input"
                             placeholder="请输入注册的手机号"/>
                </a-form-item>
                <a-form-item name="code">
                    <a-input v-model:value="userRegister.code" class="input phone-form-code-input"
                             placeholder="请输入验证码"/>
                </a-form-item>
                <a-form-item name="identity">
                    <a-radio-group v-model:value="userRegister.identity">
                        <a-radio value="0">用户</a-radio>
                        <a-radio value="1">教员</a-radio>
                    </a-radio-group>
                </a-form-item>
                <button class="login-mobile-btn" :disabled="checked === true ? false : true"
                        :style="checked === true ? {} : {opacity: .5}" @click="register">
                    注册
                </button>
                <div>
                    <a-checkbox v-model:checked="checked"></a-checkbox>
                    <span style="line-height: 18px; font-size: 12px; color: #a0a8b0">
                        我已阅读并统一
                        <a style="text-decoration: none; background: transparent; color: #23b8ff">
                            《用户服务协议》
                        </a>
                        和
                        <a style="text-decoration: none; background: transparent; color: #23b8ff">
                            《隐私政策》
                        </a>
                    </span>
                </div>
            </a-form>
        </a-modal>
    </a-layout-header>
</template>

<script lang="ts">
    import {defineComponent, ref, computed, UnwrapRef, reactive} from 'vue';
    import axios from "axios";
    import {message, Modal} from "ant-design-vue";
    import store from "@/store";
    import {mapMutations} from "vuex";
    import {DownOutlined, UserOutlined} from "@ant-design/icons-vue/lib";
    import {RuleObject, ValidateErrorEntity} from "ant-design-vue/es/form/interface";

    // declare let hexMd5: any;
    declare let KEY: any;

    interface UserRegister {
        user_number: string;
        password: string;
        telephone: string;
        code: string;
        identity: string;
    }

    export default defineComponent({
        name: 'the-header',
        setup() {
            const value = ref<string>('0');
            const checked = ref(false);
            //登录后保存
            const user = computed(() => store.state.user);
            //用来登录
            const userLogin: UnwrapRef<UserRegister> = reactive({
                user_number: '',
                password: '',
                telephone: '',
                code: '',
                identity: ''
            });
            const formRef = ref();
            const userRegister: UnwrapRef<UserRegister> = reactive({
                user_number: '',
                password: '',
                telephone: '',
                code: '',
                identity: ''
            });
            const loginModalVisible = ref(false);
            const loginModalLoading = ref(false);
            const showLoginModal = () => {
                loginModalVisible.value = true;
            };
            const registerModalVisible = ref(false);
            const registerModalLoading = ref(false);
            const showRegisterModal = () => {
                registerModalVisible.value = true;
                Modal.destroyOnClose = true;
            };
            const loginPhoneCodeModalVisible = ref(false);
            const loginPhoneCodeModalLoading = ref(false);
            const phoneCode = () => {
                loginModalVisible.value = false;
                loginPhonePswModalVisible.value = false;
                loginPhoneCodeModalVisible.value = true;
            };
            const loginPhonePswModalVisible = ref(false);
            const loginPhonePswModalLoading = ref(false);
            const phonePsw = () => {
                loginModalVisible.value = false;
                loginPhoneCodeModalVisible.value = false;
                loginPhonePswModalVisible.value = true;
            };
            const userPsw = () => {
                loginPhoneCodeModalVisible.value = false;
                loginPhonePswModalVisible.value = false;
                loginModalVisible.value = true;
            };

            let checkPhone = async (rule: RuleObject, value: string) => {
                if (value === '') {
                    return Promise.reject('请输入手机号');
                } else if (value.length != 11) {
                    return Promise.reject('手机号不合法');
                } else if (!(/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value))) {
                    return Promise.reject('手机号不合法');
                } else {
                    return Promise.resolve();
                }
            };

            const rules = {
                user_number: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ],
                telephone: [
                    {validator: checkPhone, trigger: 'change'},
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                    {min: 6, max: 6, message: '验证码不合法', trigger: 'blur'},
                ],
                identity: [
                    {required: true, message: '请输入选择注册类型', trigger: 'blur'},
                ]
            };

            //登录
            const login = () => {
                formRef.value
                    .validate()
                    .then(() => {
                        loginModalLoading.value = true;
                        axios.post('/main/login', userLogin).then((response) => {
                            loginModalLoading.value = false;
                            const data = response.data;
                            if (data.success) {
                                loginModalVisible.value = false;
                                message.success("登录成功！");
                                store.commit("setUser", data.content);
                            } else {
                                message.error(data.message);
                            }
                        });
                    })
                    .cath((error: ValidateErrorEntity<UserRegister>) => {
                        console.log('error', error);
                    });
            };

            // 注销
            const logout = () => {
                // console.log("注销开始");
                loginModalLoading.value = true;
                axios.get('/main/logout/' + user.value.user_id).then((response) => {
                    loginModalLoading.value = false;
                    const data = response.data;
                    if (data.success) {
                        loginModalVisible.value = false;
                        message.success("注销成功！");
                        store.commit("setUser", {});
                    } else {
                        message.error(data.message);
                    }
                });
            };

            const register = () => {
                formRef.value
                    .validate()
                    .then(() => {
                        registerModalLoading.value = true;
                        axios.post('/main/register', userRegister).then((response) => {
                            registerModalLoading.value = false;
                            const data = response.data;
                            if (data.success) {
                                registerModalVisible.value = false;
                                message.success("注册成功！");
                            } else {
                                message.error(data.message);
                            }
                        });
                    })
                    .cath((error: ValidateErrorEntity<UserRegister>) => {
                        console.log('error', error);
                    });
            };

            return {
                loginModalVisible,
                loginModalLoading,
                showLoginModal,
                registerModalVisible,
                registerModalLoading,
                showRegisterModal,
                loginPhoneCodeModalVisible,
                loginPhoneCodeModalLoading,
                phoneCode,
                loginPhonePswModalVisible,
                loginPhonePswModalLoading,
                value,
                checked,
                phonePsw,
                userPsw,
                DownOutlined,
                UserOutlined,
                userLogin,
                login,
                logout,
                register,
                rules,
                formRef,
                userRegister,
                user
            }
        }
    });
</script>


<style scoped>
    .logo {
        width: 120px;
        height: 31px;
        /*background: rgba(255, 255, 255, 0.2);*/
        /*margin: 16px 28px 16px 0;*/
        float: left;
        color: white;
        font-size: 18px;
        line-height: 31px;
    }

    .login-menu {
        float: right;
        color: white;
        padding-left: 10px;
    }

    .ant-menu-overflow {
        display: block;
    }

    .ant-btn {
        display: block;
    }

    /deep/ .ant-badge-dot {
        box-shadow: 0 0 0;
    }

    .ant-radio-group {
        padding-top: 15px;
    }

    /deep/ .ant-modal-footer {
        display: none;
    }

    .login-mobile-btn {
        display: block;
        margin: 20px auto 16px;
        width: 100%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        background-color: #2196f3;
        border-radius: 2px;
        border: none;
    }

    .login-mobile-btn.disabled {
        opacity: .5;
    }

    .input {
        display: inline-block;
        padding: 0 0 0 8px;
        padding-left: 8px;
        width: 267px;
        height: 40px;
        font-size: 14px;
        background-color: transparent;
    }

    .sms-code.disable {
        color: #b1b6bb;
        cursor: default;
    }

    .phone-form-code {
        position: absolute;
        right: 0;
        bottom: 5px;
    }

    .sms-code {
        display: inline-block;
        min-width: 84px;
        height: 30px;
        line-height: 28px;
        border: 1px solid #e8edf1;
        font-size: 14px;
        border-radius: 2px;
        background-color: transparent;
    }
</style>